   <style type="text/css">
        .contenedor
        {
            height: auto;
            float: left;
            width: 100%;
        }
        .utilizado-100,.utilizado-75,.utilizado-50,.utilizado-25,.libre
        {
            border: 1px solid black;
            float: left;
            height: 12px;
            width: 18px;
            margin-left: 1px;
            margin-bottom: 1px;
        }
        .utilizado-100
        {
            background-color: #FF0000;
        }
        .utilizado-75
        {
            background-color: #FF3F3F;
        }
        .utilizado-50
        {
            background-color: #FF8F8F;
        }
        .utilizado-25
        {
            background-color: #FFCFCF;
        }
        .libre
        {
            background-color: white;
        }
        .nameAplicaction
        {
            border: 1px solid black;
            float: left;
            height: 12px;
            width: 110px;
            margin-left: 1px;
            margin-bottom: 1px;
            background-color: white;
        }

        .verticaltext {
          color:#333;
          writing-mode:tb-rl;
          -webkit-transform:rotate(90deg);
          -moz-transform:rotate(90deg);
          -o-transform: rotate(90deg);
          white-space:nowrap;
          font-family: 'Trebuchet MS', Helvetica, sans-serif;
          font-size:12px;
          font-weight:normal;
        }

        .horas
        {
          width:18px;
          height:50px;
          border: 1px solid black;
          float: left;
          margin-left: 1px;
          margin-bottom: 1px;
        }
    </style>

<script type="text/javascript">


   $(function(){

        // Accordion
        $("#intervalos").accordion({ header: "h3", autoHeight: false, active: false});


        //hover states on the static widgets
        $('#dialog_link, ul#icons li').hover(
          function() { $(this).addClass('ui-state-hover'); },
          function() { $(this).removeClass('ui-state-hover'); }
        );

      });



// Busqueda

    function mostrarbusqueda(combo1){
  //combo2 = document.getElementById(combo2);

  if(combo1.options[combo1.selectedIndex].value != ""){

    $.ajax({
      type: 'post',
      url: '<?php echo url_for('ajax_busqueda_fechas_combo_monitoreo') ?>',
      data: "criterio_busqueda="+$("#busqueda_fechas").val()+"&usuario_pc="+$("#pcs_select").val(),
      success: function(data){
                            $("#muestra_busqueda").html(data);
      },complete: function(){
                                       $("#muestra_busqueda").show();

                        }
    });

  }
}



 $(document).ready(function(){

        var con = 0;
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Task');
        data.addColumn('number', 'Hours per Day');
        data.addRows(<?php echo count($lista_graficos) ?>);
        <?php foreach ($lista_graficos as $value) { ?>
                 data.setValue(con, 0,'<?php echo $value{'nameAplication'} ?>'  );
                 data.setValue(con, 1,parseInt('<?php echo $value{'timeMinutes'}?>'));
                 con++;
         <?php } ?>
         drawChartTorta(data);
 });
</script>


<div id="vista_detalle" style="display: block;">

  <h3>Vista Detallada de Pcs</h3>
         <div style="float: right; margin-top: -42px;">Tiempo de Consulta :
         <select id="busqueda_fechas"  name="busqueda_fechas" onchange="mostrarbusqueda(this);">
             <option value="0">Seleccione:</option>
             <option value="1">Hoy</option>
             <option value="2">Ayer</option>
             <option value="3">Ultima semana</option>
             <option value="4">hace 1 Mes</option>
         </select>
         </div>

  <div id="muestra_busqueda">
         <strong>
             Vista Detallada <?php echo $usuario_pc->getNombreUsuario() ?><br/>
             Nombre Pc <?php echo $usuario_pc->getNombrePc() ?>
         </strong>
            <div style="float:right ">
              <?php $fecha = date("d/m/Y"); ?>
                     <h3><?php echo $fecha; ?></h3>
            </div>
            <div>
                Horas Promedio Conectadas :<?php echo $resul_tiempo_conectado ?><br>

            </div>
      <div id="tags" style="width: 590px; height: 20px; margin: 10px auto;">
          <div  style="float: left;  width: 100px; height: 19px;" >
              <a id="graficos" onclick="show_result_monitoreo()" href="javascript:void(0);" >Graficos</a>
          </div>
          <div  style="float: left;width: 100px; height: 19px; border : solid 1px blue;">
               <!--<a id="images" href="<?php echo url_for('viewimages/index?id='.$usuario_pc->getUsuarioId()) ?>" >Imagenes </a>-->
               <a id="imagesview" onclick="mostrarimages(<?php $usuario_pc->getUsuarioId()?>)" href="javascript:void(0);">Imagenes</a>
          </div>
          <div  style="float: left;width: 120px; height: 19px; border : solid 1px blue;">
              <a id="historial" onclick="mostrarhistorial()" href="javascript:void(0);">Historial Aplicaciones </a>
          </div>
      </div>
<div id="graficos_monitoreo" style="display:block;">
  <div style="width: 590px; height: 280px; border: solid blue 1px;margin: -9px auto;">


    <div id="chart_div_torta" style="width: 585px; height: 275px; border: solid blue 1px; float: left;">
    </div>

      <!-- Tabla estadistico -->
      <div style="width: 585px; height: auto; border: solid blue 1px; ">
      <h5>Cuadro estadistico</h5>

       <div style="width: 700px;margin: 2px auto;">
       <?php   $serviceReportes   = new serviceReportes(); ?>
       <?php   $serviceAplication = new serviceAplication(); ?>

        <div class="contenedor" style="height:55px;">
         <div class="nameAplicaction"></div>
         <?php for($i=0;$i<24;$i++){ ?>
                 <div class="horas">
                  <p class="verticaltext"><?php echo $i.':00';  ?></p>
                 </div>
         <?php } ?>
        </div>

        <?php foreach($lista_consumo as $row): ?>

                  <div class="contenedor">
                  <div class="nameAplicaction">
                           <?php $resp = $serviceAplication->buscarAplicacion($row{'nameAplication'}) ?>
                           <?php if($resp['success']):   ?>
                                <?php echo $resp['object']->getNombrePrograma(); ?>
                           <?php else: ?>
                                <?php echo $row{'nameAplication'}; ?>
                           <?php endif; ?>
                  </div>
                  <?php for($i=0;$i<24;$i++){ ?>
                      <?php $success = $serviceReportes->returnColorReportingTable($i, $row{'arrayHoras'}) ?>
                      <?php if($success['success']): ?>
                            
                            <?php if($success['porcentaje']<=25): ?>
                                    <div class="utilizado-25"></div>
                            <?php elseif($success['porcentaje']<=50):?>
                                    <div class="utilizado-50"></div>
                            <?php elseif($success['porcentaje']<=75):?>
                                    <div class="utilizado-75"></div>
                            <?php else:?>
                                    <div class="utilizado-100"></div>
                            <?php endif ?>                  
                
                      <?php else: ?>
                      <div class="libre"></div>
                      <?php endif; ?>
                  <?php } ?>
                  </div>


       <?php endforeach; ?>
       </div>


      </div>
      <!-- fin de tabla  -->
  </div>




  </div>



</div>

</div>



<script type="text/javascript">

    $(document).ready(function(){

$("#graficos").click(function(){

$("#graficos_monitoreo").css({display:"block"});
$("#imagenes_monitoreo").css({display:"none"});

}
);



});


    </script>